<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<style>
		body {
			font-family: 'Microsoft YaHei', Arial, sans-serif;
			margin: 0;
			padding: 0;
			background-color: #f5f5f5;
		}

		/* 导航栏样式 */
		.nav {
			background-color: #2c3e50;
			padding: 15px 0;
			margin-bottom: 30px;
			text-align: center;
			box-shadow: 0 2px 5px rgba(0,0,0,0.1);
			position: relative;
		}

		.nav a {
			color: white;
			text-decoration: none;
			margin: 0 15px;
			padding: 8px 15px;
			font-size: 16px;
			transition: all 0.3s ease;
		}

		.nav a:hover {
			background-color: #34495e;
			border-radius: 4px;
		}

		.nav a.active {
			background-color: #3498db;
			border-radius: 4px;
		}

		/* 退出按钮样式 */
		.logout-btn {
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
			background-color: #e74c3c;
			color: white;
			padding: 8px 15px;
			border-radius: 4px;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.logout-btn:hover {
			background-color: #c0392b;
		}

		/* 内容区域样式 */
		.container {
			width: 80%;
			max-width: 1200px;
			margin: 0 auto;
			padding: 20px;
		}

		/* 表单样式 */
		.search-form {
			margin-bottom: 20px;
			text-align: center;
		}

		.search-form input[type="text"] {
			padding: 8px 15px;
			width: 200px;
			border: 1px solid #ddd;
			border-radius: 4px;
			margin-right: 10px;
			font-size: 14px;
		}

		.search-form input[type="submit"],
		button {
			padding: 8px 20px;
			background-color: #3498db;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 14px;
			transition: background-color 0.3s ease;
		}

		.search-form input[type="submit"]:hover,
		button:hover {
			background-color: #2980b9;
		}

		/* 表格样式 */
		table {
			width: 100%;
			border-collapse: collapse;
			background-color: white;
			box-shadow: 0 1px 3px rgba(0,0,0,0.1);
			margin-top: 20px;
		}

		th, td {
			padding: 12px 15px;
			text-align: left;
			border-bottom: 1px solid #ddd;
		}

		th {
			background-color: #2c3e50;
			color: white;
			font-weight: normal;
		}

		tr:hover {
			background-color: #f9f9f9;
		}

		/* 模态框样式 */
		.modal {
			display: none;
			position: fixed;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
		}

		.modal-content {
			background-color: white;
			margin: 10% auto;
			padding: 25px;
			border-radius: 5px;
			width: 50%;
			max-width: 500px;
			box-shadow: 0 3px 6px rgba(0,0,0,0.2);
		}

		.close {
			color: #aaa;
			float: right;
			font-size: 28px;
			font-weight: bold;
			cursor: pointer;
			transition: color 0.3s ease;
		}

		.close:hover {
			color: #2c3e50;
		}

		/* 表单元素样式 */
		.modal-content form {
			margin-top: 20px;
		}

		.modal-content label {
			display: block;
			margin-bottom: 8px;
			color: #2c3e50;
		}

		.modal-content input[type="text"],
		.modal-content input[type="number"],
		.modal-content select {
			width: 100%;
			padding: 8px;
			margin-bottom: 20px;
			border: 1px solid #ddd;
			border-radius: 4px;
			box-sizing: border-box;
		}

		.modal-content input[type="submit"] {
			background-color: #3498db;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			width: 100%;
			font-size: 14px;
		}

		.modal-content input[type="submit"]:hover {
			background-color: #2980b9;
		}

		/* 操作链接样式 */
		.action-link {
			color: #3498db;
			text-decoration: none;
			margin: 0 5px;
			transition: color 0.3s ease;
		}

		.action-link:hover {
			color: #2980b9;
		}

		.delete-link {
			color: #e74c3c;
		}

		.delete-link:hover {
			color: #c0392b;
		}

		/* 错误提示样式 */
		.error-message {
			color: #e74c3c;
			font-size: 12px;
			margin-top: -15px;
			margin-bottom: 15px;
			display: none;
		}

		/* 输入框错误状态 */
		.input-error {
			border-color: #e74c3c !important;
		}
	</style>
</head>

<body>
<!-- 导航栏 -->
<div class="nav">
	<a href="index.html" class="active">学生管理</a>
	<a href="user.html">用户管理</a>
	<a href="major.html">专业管理</a>
	<a href="javascript:void(0)" class="logout-btn" onclick="logout()">退出登录</a>
</div>

<div class="container">
	<div class="search-form">
		<form id="searchForm" action="student/query" method="POST">
			<input type="text" name="name" placeholder="请输入学生姓名" value="">
			<input type="submit" value="查询">
		</form>
		<p>
			<button id="addButton">添加学生</button>
		</p>
	</div>

	<table id="studentTable">
		<thead>
			<tr>
				<th>ID</th>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>专业</th>
				<th>电话</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<!-- 这里会动态填充学生信息 -->
		</tbody>
	</table>
</div>

<!-- 编辑模态框 -->
<div id="editModal" class="modal">
	<div class="modal-content">
		<span class="close">&times;</span>
		<h2>编辑学生信息</h2>
		<form id="editForm">
			<input type="hidden" id="editId">
			
			<label for="editStudentId">学号:</label>
			<input type="text" id="editStudentId" required pattern="\d{11}" maxlength="11">
			<div class="error-message" id="editStudentId-error">学号必须是11位数字</div>
			
			<label for="editName">姓名:</label>
			<input type="text" id="editName" required>
			<div class="error-message" id="editName-error">姓名不能为空</div>
			
			<label for="editAge">年龄:</label>
			<input type="number" id="editAge" required min="17" max="25">
			<div class="error-message" id="editAge-error">年龄必须在17-25岁之间</div>
			
			<label for="editMajor">专业:</label>
			<select id="editMajor" required>
				<option value="">请选择专业</option>
			</select>
			<div class="error-message" id="editMajor-error">请选择专业</div>
			
			<label for="editPhone">电话:</label>
			<input type="text" id="editPhone" pattern="\d{11}" maxlength="11">
			<div class="error-message" id="editPhone-error">电话号码必须是11位数字</div>
			
			<input type="submit" value="保存">
		</form>
	</div>
</div>

<!-- 添加学生模态框 -->
<div id="addModal" class="modal">
	<div class="modal-content">
		<span class="close">&times;</span>
		<h2>添加学生信息</h2>
		<form id="addForm">
			<label for="addStudentId">学号:</label>
			<input type="text" id="addStudentId" required pattern="\d{11}" maxlength="11">
			<div class="error-message" id="addStudentId-error">学号必须是11位数字</div>
			
			<label for="addName">姓名:</label>
			<input type="text" id="addName" required>
			<div class="error-message" id="addName-error">姓名不能为空</div>
			
			<label for="addAge">年龄:</label>
			<input type="number" id="addAge" required min="17" max="25">
			<div class="error-message" id="addAge-error">年龄必须在17-25岁之间</div>
			
			<label for="addMajor">专业:</label>
			<select id="addMajor" required>
				<option value="">请选择专业</option>
			</select>
			<div class="error-message" id="addMajor-error">请选择专业</div>
			
			<label for="addPhone">电话:</label>
			<input type="text" id="addPhone" pattern="\d{11}" maxlength="11">
			<div class="error-message" id="addPhone-error">电话号码必须是11位数字</div>
			
			<input type="submit" value="保存">
		</form>
	</div>
</div>

<script>
	window.onload = function () {
		// 获取专业列表
		function loadMajors() {
			var xhr = new XMLHttpRequest();
			xhr.open('GET', 'major/query', true);
			xhr.onreadystatechange = function() {
				if (xhr.readyState === 4 && xhr.status === 200) {
					var majors = JSON.parse(xhr.responseText);
					var editMajorSelect = document.getElementById('editMajor');
					var addMajorSelect = document.getElementById('addMajor');
					
					// 清空现有选项
					editMajorSelect.innerHTML = '<option value="">请选择专业</option>';
					addMajorSelect.innerHTML = '<option value="">请选择专业</option>';
					
					// 添加专业选项
					majors.forEach(function(major) {
						var option = document.createElement('option');
						option.value = major.name;
						option.textContent = major.name;
						editMajorSelect.appendChild(option.cloneNode(true));
						addMajorSelect.appendChild(option);
					});
				}
			};
			xhr.send();
		}
		
		// 页面加载时获取专业列表
		loadMajors();
		
		// 加载学生列表
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'student/query', true);
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4 && xhr.status === 200) {
				document.getElementById('studentTable').innerHTML += xhr.responseText;
				addEditDeleteListeners();
			}
		};
		xhr.send();

		// 搜索表单提交
		document.getElementById('searchForm').addEventListener('submit', function (e) {
			e.preventDefault();
			var name = document.querySelector('#searchForm input[name="name"]').value;
			
			var xhrPost = new XMLHttpRequest();
			xhrPost.open('POST', 'student/query', true);
			xhrPost.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
			xhrPost.onreadystatechange = function () {
				if (xhrPost.readyState === 4) {
					if (xhrPost.status === 200) {
						var table = document.getElementById('studentTable');
						// 保留表头
						while (table.rows.length > 1) {
							table.deleteRow(1);
						}
						table.innerHTML += xhrPost.responseText;
						addEditDeleteListeners();
					} else {
						alert("查询失败：" + xhrPost.responseText);
					}
				}
			};
			var params = 'name=' + encodeURIComponent(name);
			xhrPost.send(params);
		});

		function addEditDeleteListeners() {
			var editLinks = document.querySelectorAll('.edit-link');
			var deleteLinks = document.querySelectorAll('.delete-link');

			editLinks.forEach(function (link) {
				link.addEventListener('click', function (e) {
					e.preventDefault();
					var id = this.getAttribute('data-id');
					var row = this.parentNode.parentNode;
					var studentId = row.cells[1].textContent;
					var name = row.cells[2].textContent;
					var age = row.cells[3].textContent;
					var major = row.cells[4].textContent;
					var phone = row.cells[5].textContent;

					document.getElementById('editId').value = id;
					document.getElementById('editStudentId').value = studentId;
					document.getElementById('editName').value = name;
					document.getElementById('editAge').value = age;
					document.getElementById('editMajor').value = major;
					document.getElementById('editPhone').value = phone;

					var modal = document.getElementById('editModal');
					modal.style.display = "block";
				});
			});

			deleteLinks.forEach(function (link) {
				link.addEventListener('click', function (e) {
					e.preventDefault();
					var id = this.getAttribute('data-id');
					if (confirm('确定要删除学号为 ' + id + ' 的学生吗？')) {
						var xhrDelete = new XMLHttpRequest();
						xhrDelete.open('GET', 'student/delete?id=' + id, true);
						xhrDelete.onreadystatechange = function () {
							if (xhrDelete.readyState === 4 && xhrDelete.status === 200) {
								location.reload();
							}
						};
						xhrDelete.send();
					}
				});
			});
		}

		// 添加学生按钮点击事件
		document.getElementById('addButton').addEventListener('click', function() {
			var modal = document.getElementById('addModal');
			modal.style.display = "block";
		});

		// 关闭模态框
		var spans = document.getElementsByClassName("close");
		Array.from(spans).forEach(function(span) {
			span.onclick = function() {
				this.closest('.modal').style.display = "none";
			}
		});

		// 添加表单验证函数
		function validateForm(formId) {
			let isValid = true;
			const form = document.getElementById(formId);
			const studentId = form.querySelector('[id$="StudentId"]');
			const name = form.querySelector('[id$="Name"]');
			const age = form.querySelector('[id$="Age"]');
			const major = form.querySelector('[id$="Major"]');
			const phone = form.querySelector('[id$="Phone"]');

			// 重置所有错误提示
			form.querySelectorAll('.error-message').forEach(el => {
				el.style.display = 'none';
			});
			form.querySelectorAll('input, select').forEach(el => {
				el.classList.remove('input-error');
			});

			// 验证学号
			if (!studentId.value.match(/^\d{11}$/)) {
				document.getElementById(studentId.id + '-error').style.display = 'block';
				studentId.classList.add('input-error');
				isValid = false;
			}

			// 验证姓名
			if (!name.value.trim()) {
				document.getElementById(name.id + '-error').style.display = 'block';
				name.classList.add('input-error');
				isValid = false;
			}

			// 验证年龄
			const ageNum = parseInt(age.value);
			if (isNaN(ageNum) || ageNum < 17 || ageNum > 25) {
				document.getElementById(age.id + '-error').style.display = 'block';
				age.classList.add('input-error');
				isValid = false;
			}

			// 验证专业
			if (!major.value) {
				document.getElementById(major.id + '-error').style.display = 'block';
				major.classList.add('input-error');
				isValid = false;
			}

			// 验证电话（如果有输入）
			if (phone.value && !phone.value.match(/^\d{11}$/)) {
				document.getElementById(phone.id + '-error').style.display = 'block';
				phone.classList.add('input-error');
				isValid = false;
			}

			return isValid;
		}

		// 修改提交编辑表单的处理
		document.getElementById('editForm').addEventListener('submit', function (e) {
			e.preventDefault();
			if (!validateForm('editForm')) {
				return;
			}
			var id = document.getElementById('editId').value;
			var studentId = document.getElementById('editStudentId').value;
			var name = document.getElementById('editName').value;
			var age = document.getElementById('editAge').value;
			var major = document.getElementById('editMajor').value;
			var phone = document.getElementById('editPhone').value;

			var xhrEdit = new XMLHttpRequest();
			xhrEdit.open('POST', 'student/edit', true);
			xhrEdit.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xhrEdit.onreadystatechange = function () {
				if (xhrEdit.readyState === 4) {
					if (xhrEdit.status === 200) {
						alert("修改成功");
						document.getElementById('editModal').style.display = "none";
						location.reload();
					} else {
						alert(xhrEdit.responseText);
					}
				}
			};
			var params = 'id=' + encodeURIComponent(id) + 
						'&studentId=' + encodeURIComponent(studentId) + 
						'&name=' + encodeURIComponent(name) + 
						'&age=' + encodeURIComponent(age) + 
						'&major=' + encodeURIComponent(major) + 
						'&phone=' + encodeURIComponent(phone);
			xhrEdit.send(params);
		});

		// 修改提交添加表单的处理
		document.getElementById('addForm').addEventListener('submit', function(e) {
			e.preventDefault();
			if (!validateForm('addForm')) {
				return;
			}
			var studentId = document.getElementById('addStudentId').value;
			var name = document.getElementById('addName').value;
			var age = document.getElementById('addAge').value;
			var major = document.getElementById('addMajor').value;
			var phone = document.getElementById('addPhone').value;

			var xhrAdd = new XMLHttpRequest();
			xhrAdd.open('POST', 'student/add', true);
			xhrAdd.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xhrAdd.onreadystatechange = function() {
				if (xhrAdd.readyState === 4) {
					if (xhrAdd.status === 200) {
						alert("添加成功");
						document.getElementById('addModal').style.display = "none";
						location.reload();
					} else {
						alert(xhrAdd.responseText);
					}
				}
			};
			var params = 'studentId=' + encodeURIComponent(studentId) + 
						'&name=' + encodeURIComponent(name) + 
						'&age=' + encodeURIComponent(age) + 
						'&major=' + encodeURIComponent(major) + 
						'&phone=' + encodeURIComponent(phone);
			xhrAdd.send(params);
		});

		// 添加输入验证
		document.querySelectorAll('input[type="text"], input[type="number"]').forEach(input => {
			input.addEventListener('input', function() {
				const errorElement = document.getElementById(this.id + '-error');
				if (errorElement) {
					errorElement.style.display = 'none';
					this.classList.remove('input-error');
				}
			});
		});

		// 添加选择验证
		document.querySelectorAll('select').forEach(select => {
			select.addEventListener('change', function() {
				const errorElement = document.getElementById(this.id + '-error');
				if (errorElement) {
					errorElement.style.display = 'none';
					this.classList.remove('input-error');
				}
			});
		});

		// 添加退出登录函数
		window.logout = function() {
			if (confirm('确定要退出登录吗？')) {
				window.location.href = 'login.html';
			}
		};
	};
</script>
</body>

</html>